import { reactControl, ReactViewState, ReactView, ReactViewControl } from "pao-aop-client";

import React from "react";

import { addon, Ref, getObject, log, isPhoneAvailable } from "pao-aop";
import { ICompanyTemplateSignService, CompanySign, Company } from "src/models/companySign";
import FormCreator, { InputType } from "src/business/components/form-creator";
import { NTModal } from "src/projects/industryInternetSign/components/modal";
import { SignPreview } from "src/projects/industryInternetSign/components/sign-preview";
import { Button, message, Spin, Modal } from "antd";
import { IIndustryService } from "src/models/industry";
import { match } from "react-router";
import { build_qrCode, ROUTE_PATH, UPLOAD_URL, SIGN_ID, beforeUpload, isPermission, checkNoCh } from "../../app/util-tool";
import queryString from 'query-string';
import { GetFieldDecoratorOptions, FormProps } from "antd/lib/form/Form";
import { FormItemProps } from "antd/lib/form";
import { PermissionList } from "../../app/permission";
import { numCheck } from "src/business/util_tool";
import { IStencilService, Stencil, StencilCondition } from "src/models/stencil";
import NTDivStyle from "src/business/style-components/div-style";
import { NTOperationTable } from "src/business/components/operation-table";
/** 获取表单props属性 */
let formProps: any;
/**
 * 组件：更改企业模板标识控件状态
 */
export interface ChangeCompanyTemplateViewState extends ReactViewState {
    data?: any;
    companyData?: Company;
    visible?: boolean; // modal显示判断
    showCode?: boolean; // 二维码显示判断
    industryData?: any;
    src?: string;
    /** 用于提交的对象 */
    submit_data?: any;
    /** 用于预览界面的对象 */
    preview_data?: any;
    code?: any;
    /** 标识输入框是否可编辑 */
    check_code?: Boolean;
    /** 用于检查手机或者电话是否有填写 */
    mobile_empty?: boolean;
    /** 用于检查手机或者电话是否有填写 */
    tel_empty?: boolean;
    /** 滚动条 */
    loading?: boolean;
    /** 模版modal显示判断 */
    stencil_visible?: boolean;
    /** 模版列表数据源 */
    data_source?: Stencil[];
    /** 当前第几页 */
    page?: number;
    /** 当前每页数 */
    pageSize?: number;
    /** 数据总条数 */
    total_data?: number;
    /** 选中模版数据集合 */
    stencil_value?: any[];
}

/**
 * 组件：更改企业模板标识控件
 * 描述
 */
export class ChangeCompanyTemplateView extends ReactView<ChangeCompanyTemplateViewControl, ChangeCompanyTemplateViewState> {
    private columns_data_source = [{
        title: '模版名称',
        dataIndex: 'stencil_name',
        key: 'stencil_name',
        width: 500
    }, {
        title: '创建时间',
        dataIndex: 'create_date',
        key: 'create_date',
        width: 150,
    }];
    constructor(props: ChangeCompanyTemplateViewControl) {
        super(props);
        this.state = {
            mobile_empty: true,
            tel_empty: true,
            loading: false
        };
    }

    async componentWillMount() {
        this.querySelectList();
        let key = queryString.parse(location.search).key + '';
        this.setState({ code: key, check_code: false });
        if (key !== 'undefined') {
            /** 新建 */
            this.setState({
                code: key + '/qybs@'
            });
            await this.getdataService!()!.is_insert!(key)!.then((data: any) => {
                if (data && data.id !== undefined) {
                    this.setState(
                        {
                            data: data,
                            mobile_empty: data.mobile ? false : true,
                            tel_empty: data.tel ? false : true,
                            check_code: true
                        },
                        () => {
                            if (this.state.data !== undefined && this.state.data.id) {
                                this.getdataService!()!.get_company!(this.state.data.user_id)!
                                    .then((data) => {
                                        if (data && data!.id_picture && data!.id_picture!.id_picture_positive) {
                                            data!.id_picture_positive = data!.id_picture!.id_picture_positive;
                                        }
                                        if (data && data!.id_picture && data!.id_picture!.id_picture_negative) {
                                            data!.id_picture_negative = data!.id_picture!.id_picture_negative;
                                        }
                                        this.setState({
                                            companyData: data!
                                        });
                                    })
                                    .catch(error => {
                                        console.log(error);
                                    });
                            }
                        });
                }
            });

        } else {
            /** 编辑 */
            this.setState({ loading: true });
            let { [SIGN_ID]: id } = this.props.match!.params;
            await this.getdataService!()!.get_company_sign!(id)!
                .then(
                    (data: any) => {
                        this.setState(
                            {
                                data: data,
                                check_code: true,
                                code: data!.handle_code!.slice(0, data!.handle_code!.indexOf('@') + 1)
                            },
                            () => {
                                this.getdataService!()!.get_company!(this.state.data.user_id)!
                                    .then((data) => {
                                        if (data && data!.id_picture && data!.id_picture!.id_picture_positive) {
                                            data!.id_picture_positive = data!.id_picture!.id_picture_positive;
                                        }
                                        if (data && data!.id_picture && data!.id_picture!.id_picture_negative) {
                                            data!.id_picture_negative = data!.id_picture!.id_picture_negative;
                                        }
                                        this.setState({
                                            companyData: data!,
                                            loading: false
                                        });
                                    })
                                    .catch(error => {
                                        this.setState({ loading: false });
                                        console.log(error);
                                    });
                            });
                    }
                )
                .catch(error => {
                    console.log(error);
                });

        }
    }
    /** 分页回调事件 */
    pageOnCick = (contents: any) => {
        this.setState({
            page: contents,
            loading: true
        });
        this.queryList({}, contents, this.state.pageSize!)
            .then(() => {
                this.setState({
                    loading: false
                });
            })
            .catch(error => {
                this.setState({
                    loading: false
                });
                log("stencilViewControl-pageOnCick", error.message);
            });
    }
    /** 改变分页数量回调事件 */
    showSizeChange = (current: number, pageSize: number) => {
        console.log('current: ' + current + 'pageSize: ' + pageSize);
        this.setState({
            pageSize: pageSize,
            loading: true
        });
        this.queryList({}, 1, pageSize)
            .then(() => {
                this.setState({
                    loading: false
                });
            })
            .catch(error => {
                this.setState({
                    loading: false
                });
                log("stencilViewControl-showSizeChange", error.message);
            });
    }
    // 查询列表信息
    async queryList(condition: StencilCondition, page: number, count: number) {
        const data = await this.stencilService!()!.get_stencil_list!(condition, page, count)!;
        this.setState({
            total_data: data ? data!.total : 0, // 应当取接口返回的总数
            data_source: data ? data!.result : []
        });
    }
    // 初始化模版服务
    stencilService?() {
        return getObject(this.props.stencilService_Fac!);
    }
    /**
     * 引用模版按钮方法
     */
    select_stencil = () => {
        this.setState({
            // stencil_value: [],
            stencil_visible: true,
            loading: true
        });
        let condition: StencilCondition = {};
        this.queryList(condition, 1, 10)
            .then(() => {
                this.setState({
                    loading: false
                });
            })
            .catch(error => {
                this.setState({
                    loading: false
                });
                log("stencilViewControl", error.message);
            });
    }

    /** 模版选择框确定回调方法 */
    handleOk = (e: any) => {
        // 把已经选中的自定义属性列表放入data中
        let data = this.state.data;

        data!.custom_attribute = this.state.stencil_value!;
        console.log('最终值', this.state.stencil_value);
        this.setState({
            stencil_visible: false,
            data
        });
        // 设置自定义控件的值
        formProps.setFieldsValue({
            custom_attribute: data!.custom_attribute
        });
    }

    /** 模版选择框取消回调方法 */
    handleCancel = (e: any) => {
        this.setState({
            stencil_visible: false,
        });
    }
    /** 行选中回调 */
    private handleRowSelect = (e: Stencil[]) => {
        let stencil_value: Stencil[] = [];
        if (e.length > 0) {
            for (let i = 0; i < e.length; i++) {
                stencil_value = stencil_value.concat(e[i].stencil_value!);
            }
        }
        this.setState({
            stencil_value: stencil_value,
        });
    }

    // 查询行业类型列表信息
    async querySelectList() {
        const industry = await this.getIndustryService!()!.get_industry_list!()!;
        let selectOption: any[] = [];
        if (industry) {
            industry!.result!.map((item: any, idx: any) => {
                selectOption!.push({ id: item.id + '', value: item.industry_name });
            });
        }
        this.setState({
            industryData: selectOption
        });
    }

    /**
     * 上传base64，返回url地址
     */
    async upload_base64(code: string, base64: string) {
        let new_code = code.replace('/', '-');
        const src = await this.getdataService!()!.upload_rc_code!(new_code, base64)!;
        this.setState({ src: '/' + src.url });
    }

    /**
     * 生成二维码图片，返回url地址
     */
    async generateIdentifierQRCode(code: string, logo?: string, data?: any) {
        const src = await this.getdataService!()!.get_qr_code!(code, true, logo)!;
        this.setState({ src: '/' + src.url });
        let init_data = this.state.data;
        data.rc_code = this.state.src;
        let edit_count = data!.handle_code!.slice(0, data!.handle_code!.indexOf('/'));
        let companysign: CompanySign = {
            /** 索引 */
            id: init_data && init_data.id !== 'undefined' ? init_data.id : undefined,
            /** 企业标识 */
            handle_code: data.handle_code,
            /** 企业照片 */
            company_picture: data.company_picture ? data.company_picture : '',
            /** 企业名称 */
            handle_name: data.handle_name,
            /** 标识分类 */
            handle_type: data.handle_type,
            /** 用户ID */
            user_id: data.user_id,
            /** 二维码图片 */
            rc_code: data!.rc_code,
            /** 创建时间 */
            /** 行业类型 */
            industry_type: data.industry_type,
            /**
             * 组织结构代码
             */
            organization: data.organization,
            /**
             * 手机号码
             */
            mobile: data.mobile,
            /** 固定电话 */
            tel: data.tel,
            /** 传真 */
            fax: data.fax,
            /** 电子邮箱 */
            email: data.email,
            /** 公司地址 */
            address: data.address,
            /** 企业介绍 */
            introduce: data.introduce,
            /** 企业官网 */
            website: data.website,
            /** 自定义属性 */
            custom_attribute: data.custom_attribute,
            /** 企业Logo图片 */
            qr_code_logo_picture: data.qr_code_logo_picture
        };
        // if (data.id_picture_positive && data.id_picture_negative) {
        //     data.id_picture_positive.push(...data.id_picture_negative);
        // }
        let id_picture = {
            id_picture_positive: data.id_picture_positive ? data.id_picture_positive : '',
            id_picture_negative: data.id_picture_negative ? data.id_picture_negative : ''
        };
        // console.log('>>>>>>>>>>>>>>>>>>>', data);
        let company_data: Company = {
            account: !this.state.check_code ? queryString.parse(location.search).key + '' : edit_count,
            /** 格式 */
            id: this.state.companyData && this.state.companyData.id ? this.state.companyData.id : undefined,
            /** 企业经办人姓名 */
            manager_name: data.manager_name ? data.manager_name : '',
            /** 联系方式 */
            contact: data.contact ? data.contact : '',
            /** 经办人身份证 */
            id_picture: id_picture,
            /** 营业执照 */
            license: data.license ? data.license : ''
        };

        const result = await this.getdataService!()!.update_company!(companysign, company_data!)!;  // 更新/增加企业服务接口
        if (result) {
            this.setState({
                showCode: true
            });
            message.info('保存成功');
        } else {
            message.info('保存失败');
        }
    }

    /**
     * 生成二维码base64
     */
    async createCode(code: string) {
        let thiz = this;
        build_qrCode(code, function (val: any) {
            // let src = val;
            // thiz.setState({ src });
            thiz.upload_base64(code, val)
                .then(() => { })
                .catch(error => {
                    log("upload_base64", error.message);
                });
        });
    }

    /** 返回按钮 */
    onClickBack = () => {
        this.props.history!.push(ROUTE_PATH.companyTemplateView);
    }
    // 压缩图片的方法
    ontpys(img: any, callback: any) {
        let base64 = "";
        let width = 400, // image resize   压缩后的宽
            quality = 0.5, // image quality  压缩质量
            canvas = document.createElement("canvas"),
            drawer: any = canvas.getContext("2d");
        img.onload = function () {
            canvas.width = width;
            canvas.height = width * (img.height / img.width);
            drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
            base64 = canvas.toDataURL("image/jpeg", quality);
            callback(base64);
        };
    }
    /** 提交按钮 */
    onClickSubmit = async (e: any, data: any) => {
        if (this.state.check_code) {
            data!.handle_code = this.state.data!.handle_code;
        } else {
            data.handle_code = this.state.code + data.handle_code;
        }
        // this.createCode(data.handle_code);

        this.insertPreview(data!)
            .then(() => { })
            .catch(error => {
                log("insert_preview", error.message);
            });
    }
    /** 新增排序服务调用 */
    async insertPreview(data: any) {
        let companysign: CompanySign = {
            /** 索引 */
            id: data.id,
            /** 企业标识 */
            handle_code: data.handle_code,
            /** 企业照片 */
            company_picture: data.company_picture,
            /** 企业名称 */
            handle_name: data.handle_name,
            /** 标识分类 */
            handle_type: data.handle_type,
            /** 用户ID */
            user_id: data.user_id,
            /** 二维码图片 */
            rc_code: this.state.src,
            /** 创建时间 */
            /** 行业类型 */
            industry_type: data.industry_type,
            /**
             * 组织结构代码
             */
            organization: data.organization,
            /**
             * 手机号码
             */
            mobile: data.mobile,
            /** 固定电话 */
            tel: data.tel,
            /** 传真 */
            fax: data.fax,
            /** 电子邮箱 */
            email: data.email,
            /** 公司地址 */
            address: data.address,
            /** 企业介绍 */
            introduce: data.introduce,
            /** 企业官网 */
            website: data.website,
            /** 自定义属性 */
            custom_attribute: data.custom_attribute
        };
        await this.getdataService!()!.insert_preview!(companysign)!.then((result: any) => {
            this.setState(
                {
                    visible: !this.state.visible,
                    submit_data: data,
                    preview_data: result
                },
                () => {

                });
        });
    }
    // 保存服务调用
    async saveData() {
        this.setState({ loading: true });
        let data = this.state.submit_data!;
        this.generateIdentifierQRCode(data!.handle_code, data.qr_code_logo_picture ? data.qr_code_logo_picture[0] : undefined, data!)
            .then(() => {
                this.setState({ loading: false });
            })
            .catch(error => {
                this.setState({ loading: false });
                message.info('保存失败');
                log("generateIdentifierQRCode", error.message);
            });

    }

    // 企业服务
    getdataService?() {
        return getObject(this.props.companyTemplateSignService_fac!);
    }
    getIndustryService?() {
        return getObject(this.props.IIndustryService_Fac!);
    }

    /** 电话以及手机输入框判空规则 */
    private checkContact = (rule: any, value: { title: string; contents: string }[], callback: any) => {
        if (Array.isArray(value)) {
            let empty: boolean = false;
            let isNotNum: boolean = false;
            for (const iterator of value) {
                /** 判空检查 */
                if (iterator.title === "" || iterator.contents === "") {
                    empty = true;
                } else {
                    /** 不为空，进行内容数字校验 */
                    if (rule.type === "mobile") {
                        if (!isPhoneAvailable(iterator.contents)) {
                            isNotNum = true;
                        }
                    } else {
                        if (!numCheck(iterator.contents)) {
                            isNotNum = true;
                        }
                    }
                }
            }

            /** 另一个输入框的状态 */
            // let otherIsEmpty = rule.type === "tel" ? this.state.mobile_empty : this.state.tel_empty;

            /** 有非数字 */
            if (isNotNum) {
                if (rule.type === "mobile") {
                    callback("请输入有效的手机号码");
                } else {
                    callback("请输入有效的电话号码");
                }
            } else if (empty) {
                /** 自己为空 */
                callback();
                // if (rule.type === "mobile") {
                //     callback("请输入手机号码");
                // } else {
                //     callback();
                // }
            } else {
                callback();
            }
            //     else if (empty && !otherIsEmpty) {
            //         /** 自己为空，但是另一个输入框不为空，则： */
            //         /** 不需要校验 */
            //         /** 当前输入框状态 */
            //         let stateInfo = rule.type === "tel" ? { tel_empty: true } : { mobile_empty: true };
            //         this.setState(stateInfo);
            //         callback();
            //     } else if ((!empty && otherIsEmpty) || (!empty && !otherIsEmpty)) {
            //         /** 1、自己不为空，但是另一个输入框为空 */
            //         /** 2、自己不为空，另一个输入框也不为空，则： */
            //         /** 不需要校验 */
            //         /** 当前输入框状态 */
            //         let stateInfo = rule.type === "tel" ? { tel_empty: false } : { mobile_empty: false };
            //         this.setState(stateInfo);
            //         callback();
            //     } else {
            //         /** 否则，两个都为空 */
            //         /** 当前输入框状态 */
            //         let stateInfo = rule.type === "tel" ? { tel_empty: true } : { mobile_empty: true };
            //         this.setState(stateInfo);
            //         callback("手机和固定电话必须输入其中一个");
            //     }
            // } else {
            //     if (this.state.tel_empty && this.state.mobile_empty) {
            //         callback("请输入联系方式");
            //     }
            // }
        } else {
            callback();
        }
    }

    render() {
        let key = queryString.parse(location.search).key + '';
        if (key !== 'undefined') {
            const redeirect = isPermission ? isPermission!(PermissionList.CompanyTemplate_Add) : undefined;
            if (redeirect) {
                return redeirect;
            }
        } else {
            let { [SIGN_ID]: id } = this.props.match!.params;
            const redeirect = isPermission ? isPermission!(PermissionList.CompanyTemplate_Add, id) : undefined;
            if (redeirect) {
                return redeirect;
            }
        }
        let { data, industryData, companyData } = this.state;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 4 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 10 },
            },
        };
        const content = (
            <div>
                <img style={{ width: '850px' }} src={require('../../img/cp_picture.jpg')} />
            </div>
        );
        let edit_props = {
            loading: this.state.loading,
            // className: "mix-form-with-fixed-title" as "mix-form-with-fixed-title",
            form_items_props: [
                {
                    title: "企业模板标识信息",
                    need_card: true,
                    input_props: [
                        {
                            type: InputType.upload,
                            label: "二维码logo图片",
                            decorator_id: "qr_code_logo_picture",
                            field_decorator_option: {
                                // rules: [{ required: true, message: "请输入正文内容" }],
                                initialValue: data && data!.qr_code_logo_picture ? data!.qr_code_logo_picture : [],
                            } as GetFieldDecoratorOptions,
                            form_item_props: {
                                extra: "（请上传大小为1M以内的图片）（可选）"
                            } as FormItemProps,
                            option: {
                                action: UPLOAD_URL,
                                upload_amount: 1,
                                beforeUpload: beforeUpload
                            }
                        },
                        {
                            type: InputType.upload,
                            label: "企业图片",
                            decorator_id: "company_picture",
                            field_decorator_option: {
                                // rules: [{ required: true, message: "请输入正文内容" }],
                                initialValue: data ? data!.company_picture : [],
                            } as GetFieldDecoratorOptions,
                            form_item_props: {
                                extra: "（请上传大小为1M以内的图片）（可选）"
                            } as FormItemProps,
                            option: {
                                action: UPLOAD_URL,
                                upload_amount: 5,
                                beforeUpload: beforeUpload
                            }
                        },
                        {
                            type: InputType.select,
                            label: "行业类型",
                            decorator_id: "industry_type",
                            field_decorator_option: {
                                rules: [{ required: true, message: "请选择企业行业类型" }],
                                initialValue: data ? data!.industry_type : undefined,
                            } as GetFieldDecoratorOptions,
                            option: {
                                placeholder: "请选择行业类型",
                                data: industryData,
                            }
                        },
                        {
                            type: InputType.input,
                            label: "企业标识名称",
                            decorator_id: "handle_name",
                            field_decorator_option: {
                                rules: [{ required: true, message: "请输入企业标识名称" }],
                                initialValue: data && data!.handle_name ? data!.handle_name : '',// 新增的时候应该取当前用户对应的企业信息company_sign!.handle_name,
                            } as GetFieldDecoratorOptions,
                            option: {
                                placeholder: "请输入企业标识名称"
                            }
                        },
                        {
                            type: InputType.input,
                            label: "企业标识码",
                            decorator_id: "handle_code",
                            field_decorator_option: {
                                // rules: [{ validator: checkCode }],
                                rules: [{ required: true, message: "请输入企业标识码" }],
                                initialValue: data && data!.handle_code ? data!.handle_code!.slice(data!.handle_code!.indexOf('@') + 1) : '', // ,company_sign!.handle_code
                            } as GetFieldDecoratorOptions,
                            form_item_props: {
                                extra: "（必须按照此规则：企业名称首字母大写）"
                            } as FormItemProps,
                            option: {
                                addonBefore: this.state.code,
                                placeholder: "请输入企业标识码",
                                disabled: this.state.check_code
                            }
                        },
                        {
                            type: InputType.input,
                            label: "组织结构代码",
                            decorator_id: "organization",
                            field_decorator_option: {
                                rules: [{ required: true, message: "请输入组织机构代码" }],
                                initialValue: data ? data!.organization : ''
                            } as GetFieldDecoratorOptions,
                            option: {
                                placeholder: "请输入组织结构代码"
                            }
                        },
                        {
                            type: InputType.objectFieldList,
                            label: "手机号码",
                            decorator_id: "mobile",
                            field_decorator_option: {
                                rules: [{ validator: this.checkContact, type: "mobile", required: this.state.tel_empty && this.state.mobile_empty }],
                                initialValue: data ? data!.mobile : '',
                            } as GetFieldDecoratorOptions,
                            form_item_props: {
                                // extra: "（手机号码和固定电话须至少填一项）"
                            } as FormItemProps,
                            option: {
                                befor_placeholder: '联系人',
                                after_placeholder: '手机号码',
                                before_key: 'title',
                                after_key: 'contents'
                            }
                        },
                        {
                            type: InputType.objectFieldList,
                            label: "固定电话",
                            decorator_id: 'tel',
                            field_decorator_option: {
                                rules: [{ validator: this.checkContact, type: "tel", required: this.state.tel_empty && this.state.mobile_empty }],
                                initialValue: data ? data!.tel : '',
                            } as GetFieldDecoratorOptions,
                            form_item_props: {
                                // extra: "（手机号码和固定电话须至少填一项）"
                            } as FormItemProps,
                            option: {
                                befor_placeholder: '区号',
                                after_placeholder: '电话号码',
                                before_key: 'title',
                                after_key: 'contents'
                            }
                        },
                        {
                            type: InputType.objectFieldList,
                            label: "传真",
                            decorator_id: "fax",
                            field_decorator_option: {
                                rules: [{ validator: checkNoCh }],
                                initialValue: data ? data!.fax : '',
                            } as GetFieldDecoratorOptions,
                            form_item_props: {
                                extra: "（可选）"
                            } as FormItemProps,
                            option: {
                                befor_placeholder: '区号',
                                after_placeholder: '传真号码',
                                before_key: 'title',
                                after_key: 'contents'
                            }
                        },
                        {
                            type: InputType.fieldList,
                            label: "电子邮箱",
                            decorator_id: "email",
                            field_decorator_option: {
                                // rules: [{ required: true, message: "请输入正文内容" }],
                                initialValue: data ? data!.email : '',
                            } as GetFieldDecoratorOptions,
                            option: {
                                befor_placeholder: '电子邮箱',
                                after_placeholder: '手机号码',
                                before_key: 'title',
                                after_key: 'contents'
                            }
                        },
                        {
                            type: InputType.address,
                            label: "公司地址",
                            field_decorator_option: {
                                rules: [{ required: true, message: "请选择公司地址" }],
                                initialValue: data ? data!.address : '',
                            } as GetFieldDecoratorOptions,
                            decorator_id: "address",
                            option: {
                                // value: data ? data!.address : ''
                            }
                        },
                        {
                            type: InputType.text_area,
                            label: "企业介绍",
                            decorator_id: "introduce",
                            field_decorator_option: {
                                rules: [{ required: true, message: "请输入企业介绍内容，并且不能超过1000个字", max: 1000 }],
                                initialValue: data ? data!.introduce : '',
                            } as GetFieldDecoratorOptions,
                            option: {
                                autosize: {
                                    minRows: 5,
                                    minMaxs: 5
                                },
                                placeholder: '请输入企业介绍内容'
                            }
                        },
                        {
                            type: InputType.input,
                            label: "企业官网",
                            decorator_id: "website",
                            field_decorator_option: {
                                // rules: [{ required: true, message: "请输入正文内容" }],
                                initialValue: data ? data!.website : '',
                            } as GetFieldDecoratorOptions,
                            option: {
                                height: 'small',
                                placeholder: '请输入官网地址'
                            }
                        },
                        {
                            type: InputType.button,
                            label: "引用模版",
                            decorator_id: "stencil",
                            field_decorator_option: {
                            } as GetFieldDecoratorOptions,
                            option: {
                                name: '选择模版',
                                onClick: this.select_stencil
                            }
                        },
                        {
                            one_row_inputs: {
                                title: "更多信息",
                                border: true,
                                inputs_props: [
                                    {
                                        type: InputType.customProperties,
                                        col_span: 14,
                                        decorator_id: "custom_attribute",
                                        layout: {
                                            labelCol: {
                                                xs: { span: 24 },
                                                sm: { span: 24 },
                                            },
                                            wrapperCol: {
                                                xs: { span: 24 },
                                                sm: { span: 24 },
                                            },
                                        },
                                        field_decorator_option: {
                                            // rules: [{ required: true, message: "请输入正文内容" }],
                                            initialValue: data ? data!.custom_attribute! : [],
                                        } as GetFieldDecoratorOptions,
                                        option: {
                                            befor_placeholder: '类目名称',
                                            after_placeholder: '请输入类目信息',
                                            type_key: 'format',
                                            before_key: 'label',
                                            after_key: 'value',
                                            // value: data ? data!.custom_attribute! : [],
                                            upload_action: UPLOAD_URL,
                                            upload_amount: 5,
                                            beforeUpload: beforeUpload
                                        }
                                    },
                                    {
                                        type: InputType.popover,
                                        col_span: 10,
                                        layout: {
                                            labelCol: {
                                                xs: { span: 24 },
                                                sm: { span: 4 },
                                            },
                                            wrapperCol: {
                                                xs: { span: 24 },
                                                sm: { span: 20 },
                                            },
                                        },
                                        label: "参考图片",
                                        decorator_id: "picture",
                                        // default_value: "11",
                                        option: {
                                            title: '详细图片',
                                            content: content,
                                            buttonName: '点击查看',
                                            placement: 'bottom'
                                        }
                                    },
                                ]
                            }
                        }
                    ]
                },
                {
                    title: "企业资料",
                    need_card: true,
                    input_props: [
                        {
                            type: InputType.input,
                            label: "企业经办人姓名",
                            decorator_id: "manager_name",
                            field_decorator_option: {
                                rules: [{ required: true, message: "请输入经办人姓名" }],
                                initialValue: companyData ? companyData.manager_name : '',
                            } as GetFieldDecoratorOptions,
                            option: {
                                height: 'small',
                                placeholder: '请输入经办人姓名'
                            }
                        },
                        {
                            type: InputType.input,
                            label: "联系方式",
                            field_decorator_option: {
                                rules: [{ required: true, message: "请输入联系方式" }],
                                initialValue: companyData ? companyData.contact : '',
                            } as GetFieldDecoratorOptions,
                            decorator_id: "contact",
                            option: {
                                height: 'small',
                                placeholder: '请输入联系方式'
                            }
                        },
                        {
                            type: InputType.upload,
                            label: "经办人身份证正面",
                            decorator_id: "id_picture_positive",
                            field_decorator_option: {
                                // rules: [{ required: true, message: "请上传经办人身份证正面" }],
                                initialValue: companyData ? companyData.id_picture_positive : '',
                            } as GetFieldDecoratorOptions,
                            option: {
                                action: UPLOAD_URL,
                                upload_amount: 1,
                                beforeUpload: beforeUpload
                            }
                        },
                        {
                            type: InputType.upload,
                            label: "经办人身份证反面",
                            decorator_id: "id_picture_negative",
                            field_decorator_option: {
                                // rules: [{ required: true, message: "请上传经办人身份证反面" }],
                                initialValue: companyData ? companyData.id_picture_negative : '',
                            } as GetFieldDecoratorOptions,
                            option: {
                                action: UPLOAD_URL,
                                upload_amount: 1,
                                beforeUpload: beforeUpload
                            }
                        },
                        {
                            type: InputType.upload,
                            label: "营业执照",
                            decorator_id: "license",
                            field_decorator_option: {
                                // rules: [{ required: true, message: "请上传营业执照" }],
                                initialValue: companyData ? companyData.license : '',
                            } as GetFieldDecoratorOptions,
                            option: {
                                action: UPLOAD_URL,
                                upload_amount: 1,
                                beforeUpload: beforeUpload
                            }
                        }
                    ]
                }
            ],
            form_item_layout: formItemLayout,
            form_props: {
                hideRequiredMark: true
            } as FormProps,
            row_btn_props: {
                style: {
                    justifyContent: " center"
                }
            },
            other_btn_propps: [
                {
                    text: "返回",
                    cb: this.onClickBack
                }
            ],
            submit_btn_propps: {
                text: "预览",
                cb: this.onClickSubmit
            },
        };
        return (
            <NTDivStyle.NTDefaultDiv>
                <Modal
                    title="请选择模版！"
                    visible={this.state.stencil_visible}
                    onOk={() => this.handleOk(formProps)}
                    onCancel={this.handleCancel}
                >
                    <NTOperationTable
                        data_source={this.state.data_source}
                        columns_data_source={this.columns_data_source}
                        on_row_selection={this.handleRowSelect}
                        table_size='middle'
                        showHeader={true}
                        bordered={true}
                        total={this.state.total_data}
                        default_page_size={10}
                        total_pages={Math.ceil((this.state.total_data ? this.state.total_data : 0) / 10)}
                        show_footer={true}
                        page_on_click={this.pageOnCick}
                        show_size_change={this.showSizeChange}
                    />
                </Modal>
                <FormCreator {...edit_props} ref={(e: any) => formProps = e} />
                {this.state.visible ? <NTModal
                    visible={this.state.visible}
                    closable={false}
                    title="预览"
                    cancelText="返回"
                    okText={"提交并生成二维码"}
                    onCancel={() => { this.setState({ visible: false, showCode: false }); }}
                    onOk={() => { this.setState({ showCode: true, }); }}
                    content={<SignPreview showCode={!this.state.showCode} data={this.state.preview_data} qr_code={this.state.src} />}
                    footer={[
                        // 定义右下角 按钮的地方 可根据需要使用 一个或者 2个按钮
                        !this.state.showCode ? <Button onClick={() => { this.setState({ visible: false, showCode: false }); }}>返回</Button> : <div />,
                        !this.state.showCode ? <Button type="primary" onClick={() => { this.saveData(); }}>
                            提交并生成二维码
                </Button> : <Button onClick={() => { this.setState({ visible: false, showCode: false }, () => { this.props.history!.push(ROUTE_PATH.companyTemplateView); }); }}>返回</Button>,]}
                /> : ''}
                <Spin spinning={this.state.loading} />
            </NTDivStyle.NTDefaultDiv>
        );
    }
}

/**
 * 控件：更改企业模板标识控件控制器
 * 描述
 */
@addon('ChangeCompanyTemplateView', '更改企业模板标识控件', '更改企业模板标识控件')
@reactControl(ChangeCompanyTemplateView, true)
export class ChangeCompanyTemplateViewControl extends ReactViewControl {
    /**
     * 解析统计服务
     */
    public companyTemplateSignService_fac?: Ref<ICompanyTemplateSignService>;
    /**
     *  行业类型服务
     */
    public IIndustryService_Fac?: Ref<IIndustryService>;
    match?: match<{ [SIGN_ID]: string }>;
    /**
     * 模版管理服务
     */
    public stencilService_Fac?: Ref<IStencilService>;
}
